<template>
  <div id="vaddress_wrapper" class="address_tmp">
    <div class="address_div">
      <a-input ref="userNameInput" v-model="address" placeholder="请选择城市" :maxLength="0" @focus="showCityDialog" @blur="hideCityDialog" :addon-before="before ? '城市' : ''" allowClear>
        <a-tooltip slot="suffix" title="Extra information">
          <!-- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" /> -->
        </a-tooltip>
      </a-input>
    </div>
    <div class="city">
      <div class="city-components" v-if="showCity">
        <ul class="filter-tabar clearfix">
          <li v-for="(item,index) in cityListKey" :key="index" :class="{active:upCityListIndex==index}" @mouseover="upCityListKey(index)">{{item}}</li>
        </ul>
        <div class="city-content">
          <ul v-for="(item,index) in upCityList" :key="index" class="clearfix">
            <label for="">{{item.ckey}}</label>
            <li v-for="(ritem,index) in item.cityList" :key="index" @mousedown.stop="selectDepCity(ritem)">{{ritem.name}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import './index.less'
// import datas from './data' // 组件地区data

export default {
  name: 'app',
  props: ['before', 'citydata', 'mode'],
  data () {
    return {
      showCity: false,
      // dataList: datas.addressData,
      upCityListIndex: '',
      upCityList: '',
      address: '',
      md: []
    }
  },
  created () {
    this.address = this.before
  },
  computed: {
    citydataCpt () {
      return this.citydata
    },

    cityListData () {
      let $map = {}; // 处理过后的数据对象
      let $temps = []; // 临时变量
      let $result = []; // 返回结果
      if (this.citydataCpt) {
        this.citydataCpt.map(item => {
          if (item.id) {
            let $ekey = item.subType.charAt(0).toUpperCase(); // 根据key值的第一个字母分组，并且转换成大写        
            $temps = $map[$ekey] || []; // 如果map里面有这个key了，就取，没有就是空数组          
            $temps.push({
              id: item.id,
              name: item.name
            });
            $map[$ekey] = $temps;
          }
        })

        let $list = [];
        for (let _gkey in $map) {
          $list.push({
            ckey: _gkey,
            cityList: $map[_gkey]
          })
        }

        $list = $list.sort((li1, li2) => li1.ckey.charCodeAt(0) - li2.ckey.charCodeAt(0));

        let $chunk = 4;
        for (var _i = 0, _j = $list.length; _i < _j; _i += $chunk) {
          $result.push($list.slice(_i, _i + $chunk));
        }
      }
      return $result;
    },

    cityListKey () {
      let cityListKey = [];
      this.cityListData.map(item => {
        let ckeys = '';
        item.map(ritem => {
          ckeys += ritem.ckey;
        })
        cityListKey.push(ckeys);
      })
      // this.upCityList = this.cityListData[0]      
      return cityListKey;
    }
  },
  watch: {
    cityListKey () {
      this.upCityList = this.cityListData[0]
    },
  },
  methods: {
    upCityListKey (index) {
      this.upCityListIndex = index;
      this.upCityList = this.cityListData[index];
    },
    hideCityDialog () {
      this.showCity = false;
    },
    showCityDialog () {
      this.showCity = true
    },
    selectDepCity (data) {
      if (this.mode == 'multiple') {
        this.md.push(data)
        this.md = [...new Set(this.md)] // 数据去重
        this.address = this.md.map(item => item.name).toString() // 获取多选数据并转字符串
        this.$emit('selectDepCityFn', this.md)
      } else {
        let { name, id } = data
        this.address = name
        this.showCity = false;
        this.$emit('selectDepCityFn', { id, name })
      }
    },
  }
}
</script>

<style scoped lang="less">
.city .city-components {
  top: 34px;
}
.policyTab_cityTmp,
.supplier_cityTem,
.cbr_cityTem,
.billCity {
  .city .city-components {
    top: 0;
  }
}
</style>